<template>
    <div>
        <div class="cons-9 pu-con">
            <p>友情链接</p>
            <div class="cons-91">
                <a href="http://www.samr.gov.cn/" target="_blank"
                    >国家市场监督管理总局</a
                >
                <a href="http://www.cac.gov.cn/" target="_blank"
                    >中华人民共和国国家互联网信息办公室</a
                >
                <a href="https://www.mct.gov.cn/" target="_blank"
                    >中华人民共和国文化和旅游部</a
                >
                <a href="http://scjgj.jiangsu.gov.cn/" target="_blank"
                    >江苏省市场监督管理局</a
                >
                <a href="http://www.china-caa.org/" target="_blank"
                    >中国广告协会</a
                >
                <a
                    href="JavaScript:;"
                    @click="onFotChange(2, 1)"
                    :class="fotShow == 2 ? 'cons-9-on' : ''"
                >
                    <p>省内外各地广告协会</p>
                    <i class="iconfont iconjiantou"></i>
                </a>
            </div>
        </div>
        <div class="cons-10 pu-con" v-if="fotShow == 1">
            <a href="http://www.shaa.org.cn/" target="_blank">上海市广告协会</a>
            <a href="http://www.bjggxh.com/" target="_blank">北京市广告协会</a>
            <a href="http://www.gdad.com.cn/" target="_blank">广东省广告协会</a>
            <a href="http://www.zjad.net/" target="_blank">浙江省广告协会</a>
            <a href="http://www.ahsggxh.org.cn/" target="_blank"
                >安徽省广告协会</a
            >
            <a href="http://www.hbad.org.cn/" target="_blank">湖北省广告协会</a>
            <a href="http://ggxh.91open.com/" target="_blank">福建省广告协会</a>
            <a href="http://www.adzxw.com/" target="_blank">湖南省广告协会</a>
            <a href="http://www.sxadmh.com/" target="_blank">陕西省广告协会</a>
            <a href="http://www.gzadtop.com/" target="_blank">贵州省广告协会</a>
            <a href="http://sxsggxh.com" target="_blank">山西省广告协会</a>
        </div>
        <div class="cons-10 pu-con" v-if="fotShow == 2">
            <a href="http://www.shaa.org.cn/" target="_blank">上海市广告协会</a>
            <a href="http://www.bjggxh.com/" target="_blank">北京市广告协会</a>
            <a href="http://www.gdad.com.cn/" target="_blank">广东省广告协会</a>
            <a href="http://www.zjad.net/" target="_blank">浙江省广告协会</a>
            <a href="http://www.ahsggxh.org.cn/" target="_blank"
                >安徽省广告协会</a
            >
            <a href="http://www.hbad.org.cn/" target="_blank">湖北省广告协会</a>
            <a href="http://ggxh.91open.com/" target="_blank">福建省广告协会</a>
            <a href="http://www.adzxw.com/" target="_blank">湖南省广告协会</a>
            <a href="http://www.sxadmh.com/" target="_blank">陕西省广告协会</a>
            <a href="http://www.gzadtop.com/" target="_blank">贵州省广告协会</a>
            <a href="http://sxsggxh.com" target="_blank">山西省广告协会</a>
            <a href="http://www.sdsggxh.cn" target="_blank">山东省广告协会</a>
        </div>
        <!-- <nav>
            <a href="#" v-for="item in navList" :key="item.id">{{
                item.name
            }}</a>
        </nav> -->
        <div class="con-title">
            <p>
                协会邮箱：kf@cain086.com
            </p>
            <p>
                协会地址：江苏省南京市建邺区新城科技园南京国家广告产业园5栋15层江苏省广告协会
            </p>
            <!-- <a
                href="http://www.beian.gov.cn"
                target="_blank"
                style="padding-bottom: 20px;display: inline-block;"
                >苏ICP备18009208号</a
            > -->
            <a
                href="JavaScript:;"
                style="padding-bottom: 20px; display: inline-block;"
                >苏ICP备18009208号</a
            >
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            navList: [
                {
                    id: 0,
                    path: "",
                    name: "关于我们",
                },
                {
                    id: 1,
                    path: "",
                    name: "协会招聘",
                },
                {
                    id: 2,
                    path: "",
                    name: "广告服务",
                },
                {
                    id: 3,
                    path: "",
                    name: "合作加盟",
                },
                {
                    id: 4,
                    path: "",
                    name: "供稿服务",
                },
                {
                    id: 5,
                    path: "",
                    name: "网站申明",
                },
                {
                    id: 6,
                    path: "",
                    name: "网站律师",
                },
                {
                    id: 7,
                    path: "",
                    name: "会员之家",
                },
                {
                    id: 8,
                    path: "",
                    name: "留言互动",
                },
            ],
            fotShow: 0,
        };
    },
    methods: {
        onFotChange(index, type) {
            if (type == 0 && this.fotShow == 1) {
                this.fotShow = 0;
            } else if (type == 1 && this.fotShow == 2) {
                this.fotShow = 0;
            } else {
                this.fotShow = index;
            }
        },
    },
};
</script>

<style scoped>
.con-title {
    text-align: center;
    font-size: 14px;
}
nav {
    text-align: center;
    padding-bottom: 5px;
}
nav a {
    font-size: 14px;
    position: relative;
    margin: 0 5px;
}
nav a::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 13px;
    background: #666;
    top: 4px;
    right: -3px;
}
nav a:last-child::after {
    width: 0;
}
.con-title p {
    padding: 5px 0;
}
.con-title img {
    margin-top: 8px;
}
.cons-9 {
    display: flex;
    margin: 20px auto;
    background: #f5f5f5;
    padding: 10px;
    box-sizing: border-box;
}
.cons-9 > p {
    font-size: 14px;
}
.cons-91 {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    margin-left: 15px;
}

.cons-91 a {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-right: 30px;
    margin-bottom: 10px;
}

.cons-91 a i {
    color: #666;
    font-size: 12px;
    transform: rotate(270deg);
    margin-left: 10px;
}

.cons-91 .cons-9-on i {
    transform: rotate(90deg);
}

.cons-10 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.cons-10 a {
    display: block;
    width: 25%;
    text-align: center;
    margin-bottom: 10px;
}
</style>
